<template>
	<view class="tui-set-box">
		<form @submit="formSubmit" @reset="formReset">
			<tui-list-cell :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">订单号</view>
					<input placeholder-class="tui-phcolor" v-model="orderNum" class="tui-input" name="orderNum" placeholder="上传订单截图自动生成"
					 maxlength="50" type="text" />
					<tui-icon name="explain" :size="16" color="#333" style="padding: 20rpx" @click="openModal()"></tui-icon>
				</view>
			</tui-list-cell>

			<view class="tui-mtop">

				<tui-list-cell :hover="false">
					<view class="tui-line-cell">
						<view class="tui-title">请选择门店</view>
						<jPicker @sure="pickerChange" showKey="label" valKey="value" :val="shopId" :options="shopData" style="padding-left:30rpx;width:100%;" />
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell" style="flex-direction:column;align-items: flex-start;">
						<view class="tui-title">请上传订单截图（需显示订单号和订单时间）</view>
						<view style="margin-top:30rpx;">
							<tui-upload :value="orderImg" :serverUrl="serverUrl" @complete="completeOrderImg" @remove="removeOrderImg"
							 :limit="1"></tui-upload>

						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false">
					<view class="tui-line-cell" style="flex-direction:column;align-items: flex-start;">
						<view class="tui-title">请上传评价截图</view>
						<view style="margin-top:30rpx;">
							<tui-upload :value="evalImg" :serverUrl="serverUrl" @complete="completeEvalImg" @remove="removeEvalImg" :limit="1"></tui-upload>
						</view>
					</view>
				</tui-list-cell>
			</view>

			<view class="tui-submit-container">
				<tui-button shape="circle" shadow height="88rpx" type="warning" formType="submit">提交</tui-button>
			</view>
		</form>
		<tui-modal :show="modalShow" @cancel="hideModal" padding="5rpx 10rpx" :custom="true">
			<view class="tui-modal-custom">
				<image src="/static/images/index/order.png" class="tui-tips-img" mode="widthFix" style="width:100%;"></image>

				<!-- <tui-button height="72rpx" :size="28" type="danger" shape="circle" @click="handleClick8">确定</tui-button> -->
			</view>
		</tui-modal>

	</view>
</template>

<script>
	const form = require("@/components/common/tui-validation/tui-validation.js")
	import {
		BASE_URL
	} from "../../common/httpRequest.js"
	import jPicker from '../../components/J-Picker/jPicker.vue';
	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			jPicker
		},
		data() {
			return {
				serverUrl: BASE_URL + '/api/common/upload',
				cancelColor: '#888',
				color: '#5677fc',
				unitTop: false,
				shopData: [],
				orderNum: '',
				shopId: '',
				orderImg: [],
				orderImgFileId: '',
				evalImgFileId: '',
				evalImg: [],
				modalShow: false
			}
		},

		computed: {
			...mapState(['isLogin', 'userinfo']),
			shopName() {
				return this.shopId ? this.shopData.find(v => v.value == this.shopId).label : ''
			}
		},
		onShow() {
			if (!this.isLogin) {
				uni.showModal({
					title: '提示',
					content: '参加活动需要先登录',
					showCancel: true,
					cancelColor: "#555",
					confirmColor: "#5677fc",
					confirmText: "确定",
					success(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '../login/login/login?from=activity'
							})
						} else {

						}
					}
				})

			}
			this.getShopCombo()
		},
		methods: {
			pickerChange(e, key) {
				this.shopId = e.pickerVal;
			},
			completeOrderImg(e) {
				if (e.imgArr.length>0&&e.imgArr[0].fileId) {
					this.orderImg = e.imgArr.map(v => v.url);
					this.orderImgFileId = e.imgArr[0].fileId
					if (e.imgArr[0].orderNum) {
						this.orderNum = e.imgArr[0].orderNum
					}
				} else {
					this.orderImg = e.imgArr;
				}
			},
			removeOrderImg: function(e) {
				//移除图片
				let index = e.index
			},
			completeEvalImg(e) {
				if (e.imgArr.length>0&&e.imgArr[0].fileId) {
					this.evalImg = e.imgArr.map(v => v.url);
					this.evalImgFileId = e.imgArr[0].fileId
				} else {
					this.evalImg = e.imgArr;
				}
			},
			removeEvalImg: function(e) {
				//移除图片
				console.log(e)
				let index = e.index
			},
			getShopCombo() {
				this.loadding = true;
				this.tui.request("/api/shop/combo", "GET", {}, false, false, true).then(res => {
					this.shopData = res.data
				})
			},
			formSubmit: function(e) {
				if (!this.orderNum) {
					uni.showToast({
						title: '订单号必填',
						icon: "none"
					});
					return
				}
				if (!this.shopId) {
					uni.showToast({
						title: '请选择门店',
						icon: "none"
					});
					return
				}
				if (this.orderImg.length == 0) {
					uni.showToast({
						title: '请上传订单截图',
						icon: "none"
					});
					return
				}
				if (this.evalImg.length == 0) {
					uni.showToast({
						title: '请上传评价截图',
						icon: "none"
					});
					return
				}
				this.doAdd()
			},
			doAdd() {
				this.tui.request("/api/order/add", "POST", {
					orderNum: this.orderNum,
					shopId: this.shopId,
					shopName: this.shopData.find(v => v.value == this.shopId).label,
					orderImg: this.orderImg.join(","),
					orderImgFileId:this.orderImgFileId,
					evalImg: this.evalImg.join(","),
					evalImgFileId:this.evalImgFileId
				}, false, false, true).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功！',
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 500)

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}

				})
			},
			openModal() {
				this.modalShow = true
			},
			hideModal() {
				this.modalShow = false
			}
		}
	}
</script>

<style>
	.tui-set-box {
		padding-bottom: 20rpx;
		color: #333;
	}

	.tui-list-cell {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		font-size: 30rpx;
	}

	.tui-mtop {
		margin-top: 20rpx;
	}

	.tui-submit-container {
		padding: 100rpx 24rpx;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.tui-flex-box {

		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		min-height: 50rpx;
		width: 100%;
	}

	.tui-phcolor {
		color: #B3B3B3;
		font-size: 26rpx;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 99999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-count {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*人员选择*/
	.tui-person-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #47a447;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	.tui-checkbox .wx-radio-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-radio-input.wx-radio-input-checked {
		background: #47a447;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */

	/*底部选择弹层*/
	.tui-operation-right {
		height: 100rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}



	.tui-popup-scroll {
		height: 600rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	/*底部选择弹层*/
</style>
